<!DOCTYPE html>
<html>

<head>
    <title>选择题</title>
    <style>
        body {
            padding: 0 100px;
        }
        
        div {
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <h1>选择题</h1>
    <main id="main"></main>
    <button onclick="submitAnswers()">提交答案</button>
    <p id="score"></p>
    <script>
        function submitAnswers() {}
        const list = [{
            id: "001",
            titile: '在下列哪个选项中，typeof 返回的值为 "object"？',
            options: [{
                op: "A",
                value: "null",
            }, {
                op: "B",
                value: "undefined",
            }, {
                op: "C",
                value: "function",
            }, {
                op: "D",
                value: "string",
            }, ],
        }, {
            id: "002",
            titile: "下列哪个方法可以用于删除一个对象的属性？",
            options: [{
                op: "A",
                value: "object.remove(property)",
            }, {
                op: "B",
                value: "object.delete(property)",
            }, {
                op: "C",
                value: "delete object.property",
            }, {
                op: "D",
                value: "object.pop(property)",
            }, ],
        }, {
            id: "003",
            titile: "下列哪个方法可以用于在数组的末尾添加一个新元素？",
            options: [{
                op: "A",
                value: "array.add(newElement)",
            }, {
                op: "B",
                value: "array.insert(newElement)",
            }, {
                op: "C",
                value: "array.push(newElement)",
            }, {
                op: "D",
                value: "array.unshift(newElement)",
            }, ],
        }, ];
        const answer = {
            "001": "A",
            "002": "C",
            "003": "C",
        };
        const txt = document.querySelector("#main");
        const arr = list.map(function(item) {
                    return `
          <p>${item.id}. ${item.titile}</p>
      ${item.options.map((items)=>{
            return `
            <input type="radio" name=${item.id} value="${items.op}"> ${items.op}. ${items.value}
            `
        }).join('')}
        
          `
        });
        txt.innerHTML = arr.join('');
        // console.log(arr)
        function submitAnswers(){
            const inputs =document.querySelectorAll('[type="radio"]')
        // console.log(inputs.value)
            let score =0
            inputs.forEach(function(item){
                if(answer[item.name]==item.value){
                    score +=10
                }
            })
            return document.querySelector('#score').textContent = `得分为${score}分,共30分`
        }
    </script>
</body>

</html>